<template>
  <div>
    <a-form
      class="w-[60%] mx-auto"
      :label-col="{
        span: 8,
      }"
      :model="form.ftp"
      v-if="form"
      ref="formRef"
    >
      <a-form-item :label="t('Data Connection')" required>
        <a-radio-group>
          <a-radio>{{ t('Incremental connection') }}</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item :label="t('FTP Client IP')" name="ip" required>
        <a-input v-model:value="form.ftp.ip"></a-input>
      </a-form-item>

      <a-form-item :label="t('FTP Client Port')" name="port" required>
        <a-input v-model:value="form.ftp.port"></a-input>
      </a-form-item>

      <a-form-item :label="t('FTP Username')" name="username" required>
        <a-input v-model:value="form.ftp.username"></a-input>
      </a-form-item>

      <a-form-item :label="t('FTP Password')" name="password">
        <a-input-password v-model:value="form.ftp.password"></a-input-password>
      </a-form-item>

      <a-form-item :label="t('FTP File Path')" name="filePath">
        <a-input v-model:value="form.ftp.filePath"></a-input>
      </a-form-item>
    </a-form>
    <a-divider></a-divider>
    <div class="text-center">
      <a-button-group>
        <a-button @click="onPrev">{{ t('Previous step') }}</a-button>
        <a-button @click="onNext">{{ t('Next step') }}</a-button>
      </a-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { postFTPConfig } from '@/api/modules';
import { fieldsDropdownList } from '@/data/data';
import type { FormInstance } from 'ant-design-vue';
import type { DataConnectionForm } from '../types';

const step = defineModel<number>('step');
const formRef = ref<FormInstance>();
const form = defineModel<DataConnectionForm>('form');
const { t } = useI18n();

const onPrev = () => {
  step.value!--;
};

const onNext = async () => {
  try {
    await formRef.value?.validate();
    if (form.value) {
      const { data } = await postFTPConfig(form.value.ftp);
      fieldsDropdownList.value = data.data;
      step.value!++;
    }
  } catch (error) {}
};
</script>

<style lang="scss" scoped></style>
